<template>
  <div>
    <div class="top">
      <span class="title">最近播放</span>
      <span class="total">共{{playlist.length}}首</span>
      <div class="clear" @click="clearRecentPlay">清空列表</div>
      <playAllButton @showDialog="showDialog" class="playallbutton"></playAllButton>
    </div>
    <!-- :key="itemkey" -->
    <el-table 
      :data='playlist'
      stripe
      :border="false"
      size="mini"
      class="song-table"
      @row-dblclick="insertMusic"
    >
      <el-table-column
        type="index"
        label=" ">
        <template #default="scope">
          <span class="index">{{scope.$index+1 | addZero}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="音乐标题"
        width="640%">
        <template #default="scope" >
          <span class="textcontent">
            <span >{{scope.row.name}}</span>
            <span style="color:rgb(150,150,151)">{{scope.row.alia[0] === undefined ? '': '('+scope.row.alia[0]+')'}}</span>
            <i class="iconfont icon-VIP" :class="{noShow:scope.row.fee !== 1}" style="margin:0 2px;color:red;position:relative;bottom:-2px;font-size:20px;"></i>
            <i class="iconfont icon-mv" :class="{noShow:scope.row.mv === 0}" style="margin:0 2px;color:red;font-size:20px;cursor:pointer"></i>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="歌手"
        width="390%">
        <template #default="scope">
          <span>{{conName(scope.row.ar)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="播放时间"
        width="195%">
        <template #default="scope">
          <span>{{scope.row.recentPlayTime | dataFormat}}</span>
        </template>
      </el-table-column>
      
    </el-table>
    <Dialog ref='dialog' @addplaylist="addplaylist"></Dialog>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import playAllButton from 'components/common/button.vue'
import Dialog from 'components/common/replaceDialog'
import {insertMusic} from 'common/function.js'
import {addZero} from 'common/filter.js'
import {dataFormat} from 'common/filter.js'
export default {
  name:'recentPlay',
  data(){
    return {
      playlist:[]
    }
  },
  components:{
    playAllButton,
    Dialog
  },
  computed:{
    ...mapState(['recentPlay'])
  },
  methods:{
    showDialog(){
      this.$refs.dialog.dialogVisible = true
    },
    addplaylist(){
      this.$store.commit('addPlayList',this.playlist)
      this.$refs.dialog.dialogVisible = false
    },
    insertMusic,
    conName(ar){
      let arr=[]
      for(let item in ar ){
        arr.push(ar[item].name)
      }
      return arr.join('/')
    },
    clearRecentPlay(){
      this.$store.state.recentPlay = []
      localStorage.removeItem('recentPlay')
    }
  },
  // beforeCreate(){
  //   console.log('befored')
  // },
  created(){
    if(localStorage.getItem('recentPlay')){
      let list = JSON.parse(localStorage.getItem('recentPlay'))
      this.$store.state.recentPlay = list
      this.playlist = list
    }
  },
  watch:{
    recentPlay(){
      this.playlist = this.recentPlay
    }
  },
  filters:{
    addZero,dataFormat
  }
}

</script>

<style scoped>
  .top{
    margin-top: 10px;
    position: relative;
  }
  .title{
    font-size: 20px;
    color: var(--font-color);
    font-weight: 800;
  }
  .total{
    font-weight: lighter;
    color: rgb(159,159,159);
    padding-left: 10px;
    font-size: 15px;
    vertical-align: text-top;
  }
  .clear{
    position: absolute;
    right: 10px;
    top: 0;
    color:rgb(80,125,175);
    cursor: pointer;
  }
  .playallbutton{
    margin-top: 30px;
  }
  .noShow{
    display: none;
  }
  .song-table{
    display: inline-block;
    width: 1400px;
    position: relative;
    left: -30px;
    margin-top: 15px;
  }
  .index{
    position: relative; 
    left: 17px;
    color: rgb(207,207,207);
    font-weight: lighter;
    letter-spacing: 1px;
  }
</style>